<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		html, body {
			height: 100%;
			cursor: pointer;
			width: 100%;
			filter: alpha(opacity=0);
			opacity: 0;
		}

		form {
			height: 100%;
			width: 100%;
		}

		.file-wrap {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}

		.file-wrap input {
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer !important;
			color: transparent;
			filter: alpha(opacity=0);
		}

		input {
			color: transparent;
			text-shadow: 0 0 0 transparent;
			font-size: 100px;
		}

		.file-btn {
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data"
	  name="form1">
	<div class="none file-wrap">
		<input type="file" class="file-btn" name="btn" id="fileBtn" onchange="onChange_fileBtn()" title="选择文件">
		<label id="fileName"></label>
		<input type="text" readonlyunselectable="on" readonly="true" style="display: none;" name="redirectUrl" id="redirectUrl">
		<input type="submit" name="submit" id="submit" style="visibility: hidden;">
		<input type="reset" name="submit" id="reset" style="visibility: hidden;">
	</div>
</form>
</body>
<script>
	//  .doc .docx  .xls .xlsx  .ppt .pptx  .txt   .jpg  .png  .rar
	//  png ,jpg,jpeg

	var picExtList = ["jpeg", "png", "jpg"];
	var fileExtList = ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf", "jpg", "png", "jpeg", "rar", "zip"];
	var urlData = queryUrl(window.location.href);
	init();
	function $($el)
	{
		return document.querySelector($el);
	}

	function init()
	{
		if (urlData.query.type == "pic")
		{
			$("#fileBtn").accept = "image/jpeg,image/x-png";
		}
	}

	function onChange_fileBtn(e)
	{
		if ($("#fileBtn").files.length > 0)
		{
			var file = $("#fileBtn").files[0];
			var fileName = file.name;
			var fileSize = file.size;
			var index = file.name.lastIndexOf('.');
			var fileType = fileName.substr(index + 1).toLowerCase();
			fileSize = Math.floor(fileSize / 1048576 * 100) / 100;
			if (fileSize > 3)
			{
				window.parent.sendMsg("error", {
					msg: "文件限制大小为3M以内",
					type: urlData.query.subType
				});
				$("#reset").click();
				return;
			}
			if (urlData.query.type == 'file')
			{
				if (fileExtList.indexOf(fileType) < 0)
				{
					window.parent.sendMsg("error", {
						msg: "文件类型不正确，请重新上传",
						type: urlData.query.subType
					});
					$("#reset").click();
					return;
				}
			}
			else
			{
				if (picExtList.indexOf(fileType) < 0)
				{
					window.parent.sendMsg("error", {
						msg: "文件类型不正确，请重新上传",
						type: urlData.query.subType
					})
					$("#reset").click();
					return;
				}
			}
			window.parent.sendMsg("info", {
				name: fileName,
				type: urlData.query.subType
			});
			$("#form1").action = urlData.query.access + "?type=" + urlData.query.type +
					"&fileName=" + encodeURIComponent(fileName) + "&redirectUrl=" + urlData.query.redirectUrl;
			$("#submit").click();
		}
	}

	//	function onClick_packageBtn()
	//	{
	//		$.ajax({
	//			url: "http://{$host}/publish/package",
	//			type: "get"
	//		});
	//		window.location.href = "http://{$host}/upload";
	//	}

	function queryUrl($query)
	{
		var res = {};
		var url = $query.split("?")[0];
		var port = url.split("://")[0];
		port != "" && (port += "://");
		var tempurl = url.substr(port.length);
		var host = port + tempurl.substring(0, tempurl.indexOf("/"));
		$query = $query.replace(url, "");
		var query = {};
		var bookmark = "";
		$query = $query.trim().replace(/^(\?|#|&)/, '')
		if ($query.indexOf('#') > 0)
		{
			bookmark = $query.substr($query.indexOf('#') + 1);
			$query = $query.replace('#' + bookmark, '');
		}

		if ($query)
		{
			$query.split('&').forEach(function (param)
			{
				var parts = param.replace(/\+/g, ' ').split('=')
				var key = decodeURIComponent(parts.shift())
				var val = parts.length > 0
						? decodeURIComponent(parts.join('='))
						: null

				if (query[key] === undefined)
				{
					query[key] = val
				}
				else if (Array.isArray(query[key]))
				{
					query[key].push(val)
				}
				else
				{
					query[key] = [query[key], val]
				}
			})
		}
		res.url = url;
		res.host = host;
		res.bookmark = bookmark;
		res.query = query;
		return res
	}

</script>
</html>